<template>
  <div>
      <transition-group v-bind:css="false"
                        v-on:before-enter="beforeEnter"
                        v-on:enter="enter"
                        v-on:leave="leave"
                        tag="div" >
        <div  class="card-color note-list-item " v-for="item in noteList" :key="item.id"  @click="toNoteContent(item)">
          <div v-if="item.note_subscript > 0" class="subscript">{{item.note_subscript===50?'精华':item.note_subscript===60?'热门':''}}</div>
          <div class="content-card-title  bookmark">
            {{item.name}}
          </div>
          <div style="padding:3px 20px;overflow: hidden;text-align: left;flex-grow: 1;">
            <span style="color:#999999;">{{item.preview}}</span>
          </div>
          <div style="text-align: left;padding:0 5px 0 5px;">
            <el-tag style="margin:0 2px 0 2px" size="small" v-for="(label,index) in item.noteLabels" :key="label.id" :type="index%2===0?'success':index%3===0?'':'info'">{{index >0 ? '·':''}}{{label.name}} </el-tag>
          </div>
          <div style="text-align: left;padding:5px;float: left;">
            <div style="display: inline"><i class="el-icon-date"></i>&nbsp;{{item.create_time}}</div>&nbsp;&nbsp;
            <div style="display: inline"><i class="el-icon-view"></i>&nbsp; {{item.click}} </div>
          </div>
        </div>
      </transition-group>
      <div class=" card-color card-margin">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-size="notePage.size"
          layout="total, prev, pager, next"
          :hide-on-single-page="true"
          :total="notePage.total">
        </el-pagination>
      </div>
      <div v-if="noData"  class="left-item card-color card-margin">~没有笔记~</div>
  </div>

</template>

<script>
import request from '@/utils/request'
import Velocity from 'velocity'
export default {
  props: {
    note: {
      type: Object,
      default: () => {}
    }
  },
  name: 'content-note',
  data: function () {
    return {
      delete: true,
      noteList: [],
      notebook: {},
      notePage: {
        size: 6,
        current: 1,
        total: 1
      },
      noData: false
    }
  },
  computed: {
    chooseCategories: function () {
      return this.$store.state.chooseCategories
    }
  },
  watch: {
    '$route.query.notebook_id' (to, from) {
      this.notebook.id = to
      this.noteList = []
      this.$store.state.chooseMenuId = this.notebook.id
      this.notePage.current = 1
      this.queryNotesByNoteBook()
    },
    chooseCategories: function (nw, old) {
      if ((old.length > 0 && nw.length <= 0) || (old.length <= 0 && nw.length > 0) || (old.length > 0 && nw.length > 0)) {
        this.notePage.current = 1
        this.queryNotesByNoteBook()
      }
    }
  },
  created () {
    this.notebook.id = this.$route.query.notebook_id
    this.noteList = []
    this.$store.state.chooseMenuId = this.notebook.id
    this.notePage.current = 1
    this.queryNotesByNoteBook()
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '120px' },
          { complete: done }
        )
      }, delay)
    },
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    },
    handleCurrentChange: function (current) {
      this.notePage.current = current
      this.queryNotesByNoteBook()
    },
    queryNotesByNoteBook: function () {
      if (!this.notebook) return
      request({
        url: '/notebook/note/queryNotesByNoteBookAndCategory',
        method: 'post',
        data: {
          notebook: this.notebook,
          noteCategories: this.$store.state.chooseCategories,
          page: this.notePage
        }
      }).then(res => {
        if (res.result) {
          const that = this
          const interval = setInterval(function () {
            if (that.noteList.length > 0 && that.delete) {
              that.noteList.shift()
            } else {
              clearInterval(interval)
              that.notePage.current = res.data.current
              that.notePage.total = res.data.total
              that.notePage.size = res.data.size
              that.addList(res.data.data)
            }
          }, 50)
          setTimeout(() => {
            that.noData = JSON.parse(JSON.stringify(that.noteList)).length <= 0
          }, 500)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    addList: function (list) {
      const that = this
      let max = list.length
      let index = 0
      const interval = setInterval(function () {
        if (index < max) {
          that.noteList.push(list[index])
          index++
        } else {
          clearInterval(interval)
        }
      }, 50)
    },
    toNoteContent: function (note) {
      // let url = '/content-reader?note_id=' + note.id + '&title=' + note.name
      // window.open(url, '_blank')
      this.$router.push({ path: '/content-reader', query: { note_id: note.id, title: note.name } })
    }
  }
}
</script>

<style>

  .note-list-item {
    position: relative;
    cursor:pointer;
    height:120px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 1px;
  }



</style>
